<template>
	<div class="PublicPraise">
		<div class="tab">
			<ul class="tab-list">
				<li 
				v-for="(item,index) in TabList"
				:key = "index"
				:class="{active:active===index}"
				@click="handChangeView(index);close(index)">{{item}}</li>
			</ul>
		</div>
		<keep-alive>
			<component :is="currentTabComponent"></component>
		</keep-alive>
	</div>
</template>

<script>
	import List0 from "./PublicPraise/List0"
	import List1 from "./PublicPraise/List1"
	import List2 from "./PublicPraise/List2"
	import List3 from "./PublicPraise/List3"
	export default{
		name:'PublicPraise',
		
		components:{
			List0,
			List1,
			List2,
			List3
		},
		
		data(){
			return{
				"TabList":["全部评价","好评","中评","差评"],
				currentTabComponent:List0,
				active:0
			}
		},
		
		methods:{
			handChangeView(component){
				this.currentTabComponent = "List" + component
			},
			close(i){
				this.active = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	.PublicPraise .tab{
		border-top: 1px solid #ccc;
	}
	.PublicPraise .tab-list{
		width:690px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		margin: 0 auto;
		padding:10px 0;
	}
	.PublicPraise .tab-list li{
		width:135px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 24px;
		background: #999;
		color:#fff;
		border-radius: 20px;
	}
	.PublicPraise .tab-list .active{
		background: #ff9900;
	}
</style>